<template>
  <div class="scroll-container">
    <!-- 内容区域 -->
    <div class="scroll-content" ref="scrollContent">
      <div 
        v-for="(page, pageIndex) in pages" 
        :key="`page-${pageIndex}`"
        class="page-wrapper"
      >
        <ul class="button-group">
          <li 
            v-for="(item, itemIndex) in page" 
            :key="`item-${pageIndex}-${itemIndex}`"
            :value="item"
            @click="handleItemClick(item)"
            :class="{ selected: internalSelected === item }"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 翻页按钮 -->
    <button 
      class="scroll-button prev" 
      :class="{ hidden: currentIndex === 0 }" 
      @click="prevPage"
    >
      ❮
    </button>
    <button 
      class="scroll-button next" 
      :class="{ hidden: currentIndex >= pageCount - 1 }" 
      @click="nextPage"
    >
      ❯
    </button>
  </div>
</template>

<script>
export default {
  name: 'CategoryScroll',
  props: {
    selectedItem: {
      type: String,
      default: '全部'
    }
  },
  data() {
    return {
      currentIndex: 0,
      itemWidth: 0,
      itemsPerPage: 8,
      internalSelected: this.selectedItem, // 内部维护的选中状态
      // categories: [
      //   '全部', '国内', '国际', '航空', '军事', '股票', '商业', '基金', '电视剧',
      //   '理财', 'CBA', 'NBA', '游戏', '时尚', '教育', '手机', '人工智能', '科技',
      //   '房产', '音乐', '电影', '数码', '文化', '国内足球', '国际足球', '艺术', '家电'
      // ],
      categories: [
        '全部', '国内', '国际', '航空', '军事', '财经', '体育', '公益', '财经',
        '家电', '教育', '游戏', '娱乐', '政务', '智能', '科技', '旅游', '时尚',
        '手机', '艺术', '音乐'
      ]
    }
  },
  computed: {
    pages() {
      const pages = []
      for (let i = 0; i < this.categories.length; i += this.itemsPerPage) {
        pages.push(this.categories.slice(i, i + this.itemsPerPage))
      }
      return pages
    },
    pageCount() {
      return this.pages.length
    }
  },
  watch: {
    selectedItem(newVal) {
      if (newVal !== this.internalSelected) {
        this.internalSelected = newVal
        this.$nextTick(this.scrollToSelectedItem)
      }
    }
  },
  mounted() {
    this.initScroll()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initScroll() {
      this.$nextTick(() => {
        if (this.$refs.scrollContent?.firstElementChild) {
          this.itemWidth = this.$refs.scrollContent.firstElementChild.clientWidth
          this.scrollToSelectedItem()
        }
      })
    },
    handleResize() {
      this.initScroll()
    },
    scrollToSelectedItem() {
      const index = this.categories.indexOf(this.internalSelected)
      if (index >= 0 && this.itemWidth > 0) {
        this.currentIndex = Math.floor(index / this.itemsPerPage)
        this.$refs.scrollContent.style.transform = `translateX(-${this.currentIndex * this.itemWidth}px)`
      }
    },
    prevPage() {
      if (this.currentIndex > 0) {
        this.currentIndex--
        this.$refs.scrollContent.style.transform = `translateX(-${this.currentIndex * this.itemWidth}px)`
      }
    },
    nextPage() {
      if (this.currentIndex < this.pageCount - 1) {
        this.currentIndex++
        this.$refs.scrollContent.style.transform = `translateX(-${this.currentIndex * this.itemWidth}px)`
      }
    },
    handleItemClick(item) {
      if (this.internalSelected !== item) {
        console.log(item);
        this.internalSelected = item
        this.$emit('changeCategory', item)
        this.scrollToSelectedItem()
      }
    }
  }
}
</script>

<style scoped>
.scroll-container {
  width: 91%;
  max-width: 756px;
  margin: 0 auto 10px;
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  border-bottom: 2px solid #ff4d4f;
  background: white;
}

.scroll-content {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
}

.page-wrapper {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

.button-group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.button-group li {
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  color: #333;
  font-weight: normal;
}

.button-group li.selected {
  color: #ff4d4f;
  font-weight: bold;
}

.button-group li:hover {
  color: #ff4d4f;
}

.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.scroll-button.prev {
  left: 5px;
}

.scroll-button.next {
  right: 5px;
}

.scroll-button.hidden {
  opacity: 0;
  pointer-events: none;
}
</style>